O Framework bootstrap conta com muitos recursos úteis dentre eles temos o GRID.

Parece uma coisa simples mas é cheia de recursos e muito útil.

A primeira a saber sobre o grid é que ele ocupa uma linha inteira do browser. Dentro dessa linha o bootstrap é capaz de exibir de 1 a 12 itens sendo que o espaço ocupado por eles sempre será o mesmo, ou seja, a largura do browser será dividida igualmente por quantos elementos colocar-mos dentro do grid.

O mais legal é que eu posso ter uma linha utilizando um grid e poucas linhas após utilizar o sistema de grid e ter exatamente a mesma distribuição de elementos do grid anterior, parecendo a antiga técnica de colocar as informações dentro de uma table.

Resumo:

O bootstrap divide a tela em até 12 colunas em cada linha do browser.

Cada vez que você insere uma coluna ele divide a linha para que as colunas tenham o mesmo tamanho.

Como usar:

O grid será composto de uma tag div agrupadora com a classe row e uma ( ou mais ) div(s) filha. Esta ocupara toda a linha inteira se for única ou dividirá igualmente o espaço da largura do browser com o número de tags filhas.

Ao inserir uma segunda div filha o espaço da linha será dividido em 2 partes iguais, uma para cada div filha.
Para usar este efeito basta inserir o bootstrap e colocar na div superior ( que agrega uma ou mais divs da linha) a classe class="row"

Importante : Caso o conteúdo ( normalmente um texto ) seja maior que a largura da coluna do grid este será quebrado e a continuação escrita na linha inferior dentro do grid, ou seja, a coluna do grid aumenta de altura para acomodar o excesso do item. Veja exemplo abaixo.

Redimensione a tela para ver os efeitos. O GRID é responsivo.

Código:

<p>Uma coluna.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white">.col1</div>
    </div>
    <hr />

    <p>Duas colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
    </div>
    <hr />

    <p>Três colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
    </div>
    <hr />

    <p>Quatro colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
    </div>
    <hr />

    <p>Cinco colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
    </div>
    <hr />

    <p>Seis colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
    </div>
    <hr />

    <p>Sete colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
    </div>
    <hr />

    <p>Oito colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
        <div class="col" style="background-color:cadetblue;">.col8</div>
    </div>
    <hr />

    <p>Nove colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
        <div class="col" style="background-color:cadetblue;">.col8</div>
        <div class="col" style="background-color:chartreuse;">.col9</div>
    </div>
    <hr />

    <p>Dez colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
        <div class="col" style="background-color:cadetblue;">.col8</div>
        <div class="col" style="background-color:chartreuse;">.col9</div>
        <div class="col" style="background-color:coral;">.col10</div>
    </div>
    <hr />

    <p>Onze colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
        <div class="col" style="background-color:cadetblue;">.col8</div>
        <div class="col" style="background-color:chartreuse;">.col9</div>
        <div class="col" style="background-color:coral;">.col10</div>
        <div class="col" style="background-color:cornflowerblue;">.col11</div>
    </div>
    <hr />

    <p>Doze colunas de tamanhos iguais.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1</div>
        <div class="col" style="background-color:blanchedalmond;">.col2</div>
        <div class="col" style="background-color:blue;">.col3</div>
        <div class="col" style="background-color:blueviolet;">.col4</div>
        <div class="col" style="background-color:brown;">.col5</div>
        <div class="col" style="background-color:steelblue;">.col6</div>
        <div class="col" style="background-color:blueviolet;">.col7</div>
        <div class="col" style="background-color:cadetblue;">.col8</div>
        <div class="col" style="background-color:chartreuse;">.col9</div>
        <div class="col" style="background-color:coral;">.col10</div>
        <div class="col" style="background-color:cornflowerblue;">.col11</div>
        <div class="col" style="background-color:crimson;">.col12</div>
    </div>     <hr />

<p>Teste - Grid com Doze colunas com muito texto.</p>
    <div class="row">
        <div class="col" style="background-color:black;color:white;">.col1-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:blanchedalmond;">.col2-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:blue;">.col3-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:blueviolet;">.col4-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:brown;">.col5-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:steelblue;">.col6-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:blueviolet;">.col7-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:cadetblue;">.col8-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:chartreuse;">.col9-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:coral;">.col10-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:cornflowerblue;">.col11-Teste - Grid com Doze colunas com muito texto.</div>
        <div class="col" style="background-color:crimson;">.col12-Teste - Grid com Doze colunas com muito texto.</div>
    </div>